<template>
  <div class="seller">
    <div class="top">
      <p class="title">采购商分析</p>

      <div class="btn">
        <span class="item" :class="showTable ? 'active' : ''" @click="showTable = true">表格</span>
        <span class="item" :class="!showTable ? 'active' : ''" @click="showTable = false">图表</span>
      </div>

    </div>
    <el-table
      v-show="showTable"
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="consigneename"
        label="公司名称">
      </el-table-column>
      <el-table-column
        prop="weight"
        label="重量（kg）">
      </el-table-column>
      <el-table-column
        prop="piece_count"
        label="件数">
      </el-table-column>
      <el-table-column
        prop="count"
        label="频次">
      </el-table-column>
    </el-table>
    <div v-show="!showTable" style="width: 100%">
      <div id="myChart" style="height: 500px;width:1150px"></div>
    </div>
  </div>
</template>

<script>
    import { getUsaData } from '@/api/automation/customs'
    export default {
        name: "seller",
        data() {
            return {
                tableData:[],
                showTable:true,
                yArr:[],
                numArr:[]
            }
        },
        methods: {
            init() {
                getUsaData(1).then(res => {
                    this.tableData = res.data.data
                    this.yArr = []
                    this.numArr = []
                    this.tableData.forEach((item) => {
                        this.yArr.push(item.consigneename)
                        this.numArr.push(item.weight)
                    })
                    this.$emit('update')
                    this.drawLine()
                })
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                let options = {
                    color: ['#2A97F9'],
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    yAxis : [
                        {
                            type : 'category',
                            data : this.yArr,
                            axisTick: {
                                alignWithLabel: true
                            },
                            offset:265,
                            axisLabel:{
                                formatter:function(val){
                                    var strs = val.split(''); //字符串数组
                                    var str = ''
                                    for(var i = 0, s; s = strs[i++];) { //遍历字符串数组
                                        str += s;
                                        if(!(i % 21)) str += '\n'; //按需要求余
                                    }
                                    return str
                                },
                                align:'left',
                                interval:0,
                                margin:-90,
                                textStyle: {
                                    align:'left',
                                    baseline:'middle'
                                }
                            }
                        },
                    ],
                    xAxis : [
                        {
                            type : 'value',
                            boundaryGap: [0, 0.01]
                        }
                    ],
                    series : [
                        {
                            name: '重量',
                            type:'bar',
                            barWidth: 30,		//设置柱子宽度
                            barBorderRadius:5,
                            data:this.numArr
                        }
                    ]
                }
                myChart.setOption(options)

            }
        }
    }
</script>

<style scoped lang="scss">
.seller{
  font-size: 13px;
  padding: 15px 25px;
  background-color: white;
  border-radius: 20px;
  margin-bottom: 20px;
}
  .title{
    color: #2A97F9;
    font-size: 14px;
    font-weight: 600;
  }
  .top{
    display: flex;
    justify-content: space-between;
    padding-bottom: 14px;
  }
  .item{
    width: 80px;
    height: 25px;
    display: inline-block;
    color: #2A97F9;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
  }
  .btn{
    border: 2px solid #2A97F9;
    border-radius: 10px;
    overflow: hidden;
  }
  .active{
    background-color: #2A97F9;
    color: white;
  }
</style>
